<template>
  <div class="withdrawalInformation">
    <div class="withdraw_mode">
      <div class="txt_box">
        <div class="l_box">
          <div class="header_box">
            <div class="tit" @click="showMsg">
              <span>{{ carteiraLang.conta_pix }}</span>
              <NuxtImg
                src="/images/layout/Icon_Que.png"
                class="logo-question"
              />
            </div>
            <!---->
            <div class="btns">
              <template v-if="isCancelar">
                <div class="btn btn1" @click="checkCancelar">
                  {{ carteiraLang.mudar }}
                </div>
              </template>
              <template v-else>
                <div class="btn btn1" @click="checkCancelar">
                  {{ carteiraLang.cancelar }}
                </div>
                <div class="btn btn2">{{ carteiraLang.salvar }}</div>
              </template>
            </div>
          </div>
          <!-- 不可输入 -->
          <div v-if="isCancelar" class="c_box">
            <div>
              <span>{{ carteiraLang.tipo }}</span>
              <span class="text_hiding">{{ formData.right_tipo }}</span>
            </div>
            <div>
              <span>{{ carteiraLang.nome }}</span>
              <span class="text_hiding">{{ formData.right_digite }}</span>
            </div>
            <div>
              <span>{{ carteiraLang.cpf }}</span>
              <span class="text_hiding">{{ formData.right_entre }}</span>
            </div>
          </div>
          <!--可输入-->
          <div v-else class="seting">
            <div class="input-box">
              <div class="label">{{ carteiraLang.tipo }}</div>
              <input type="text" disabled :value="formData.right_tipo" />
            </div>
            <div class="input-box">
              <div class="label">{{ carteiraLang.nome }}</div>
              <input
                type="text"
                maxlength="11"
                :placeholder="carteiraLang.digite_seu_nome"
                pattern="\d{11}"
                :value="formData.right_digite"
                @blur="valid('digite')"
                @input="handleInput($event, 'right_digite')"
              />
              <span class="tips_msg" v-if="showNameTips">
                {{ carteiraLang.nome_nao_pode_estar_vazio }}
              </span>
            </div>
            <div class="input-box">
              <div class="label">{{ carteiraLang.cpf }}</div>
              <input
                type="tel"
                maxlength="11"
                :placeholder="carteiraLang.entre_no_fundo_de_previdencia"
                pattern="\d{11}"
                :value="formData.right_entre"
                @blur="valid('entre')"
                @input="handleInput($event, 'right_entre')"
              />
              <span class="tips_msg" v-if="showCpfTips">
                {{ carteiraLang.cpf_deve_ter_pelo_menos_11_digitos }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const [carteiraLang]: any = await Promise.all([
  getCurrentPageLang("carteira"),
  getCurrentPageLang("system"),
]);

const props = defineProps(["formData"]);
const emits = defineEmits(["changeFormData"]);

const userStore = useUserStore();

// 是否可编辑
const isCancelar = ref(false);
function checkCancelar() {
  isCancelar.value = !isCancelar.value;
}

// 验证
const showNameTips = ref(false);
const showCpfTips = ref(false);
function valid(type: string) {
  if (type === "digite") {
    showNameTips.value = props.formData.right_digite ? false : true;
  }
  if (type === "entre") {
    showCpfTips.value =
      props.formData.right_entre?.length === 11 ? false : true;
  }
}

// 弹窗
function showMsg() {
  showDialog({
    title: carteiraLang.pix_tip_title,
    message: carteiraLang.pix_tip_text,
    destroyOnClose: true,
    className: "custom-dialog",
    showConfirmButton: false,
    showCancelButton: true,
  });
}

// 初始化数据
function initData() {
  isCancelar.value = false;
  showNameTips.value = false;
  showCpfTips.value = false;
}
onMounted(() => {
  initData();
});
watch(
  () => userStore.showCarteira,
  (val) => {
    if (!val) return;
    initData();
  }
);

// 输入框输入事件
function handleInput(ev: any, field: string) {
  emits("changeFormData", { key: field, value: ev.target.value?.trim() });
}
</script>

<style scoped lang="scss">
// 全局过渡效果
.depositAndWithdrawal * {
  transition: all 0.3s ease;
}

// 主容器
.withdrawalInformation {
  margin-bottom: 16px;
}

// 提现模式容器
.withdraw_mode .txt_box {
  display: flex;
  flex-direction: column;
}

// 左侧内容框
.withdraw_mode .txt_box .l_box {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 0.3rem;
}

// 头部区域
.withdraw_mode .txt_box .l_box .header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  color: var(--theme-neutral1);
}

// 标题区域
.withdraw_mode .txt_box .l_box .header_box .tit {
  font-size: 0.38rem;
  font-weight: 100;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  color: #f1bae0;
}

// 按钮容器
.withdraw_mode .txt_box .l_box .header_box .btns {
  display: flex;
  align-items: center;
  gap: 0.12rem;
}

// 按钮基础样式
.withdraw_mode .txt_box .l_box .header_box .btn {
  width: 1.6rem;
  height: 0.6rem;
  font-size: 0.34rem;
  color: var(--theme-neutral1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.1rem;
  font-weight: 100;
}

// 按钮变体样式
.withdraw_mode .txt_box .l_box .header_box .btn1 {
  background: #2fb0e0;
}

.withdraw_mode .txt_box .l_box .header_box .btn2 {
  background: #e66fc8;
}

// 设置区域
.withdraw_mode .txt_box .seting {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

// 输入框容器
.input-box {
  height: 1.2rem;
  background: #2c1d31;
  border: 0.03rem solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  position: relative;
  color: var(--theme-neutral1);
}

// 标签样式
.input-box .label {
  height: 100%;
  width: 1.6rem;
  font-size: 0.38rem;
  position: relative;
  display: flex;
  align-items: center;
}

// 标签分隔线
.input-box .label:before {
  content: "";
  position: absolute;
  right: 0rem;
  width: 0.04rem;
  height: 0.6rem;
  background: var(--border-color);
  border-radius: 0.2rem;
}

// 输入框
.input-box input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: var(--theme-dec1);
  padding-left: 0.4rem;
  font-size: 0.32rem;
}

// 问号图标
.logo-question {
  width: 0.4rem;
}

.input-box .tips_msg {
  position: absolute;
  bottom: -0.31rem;
  left: 0.1rem;
  color: red;
  font-size: 0.28rem;
}
.withdrawalInformation .withdraw_mode .txt_box .l_box .c_box {
  margin-top: 0.6rem;
  height: 100%;
  box-sizing: border-box;
}
.withdrawalInformation .withdraw_mode .txt_box .l_box .c_box > div {
  display: grid;
  grid-template-columns: 15% 1fr;
  line-height: 0.6rem;
}
.withdrawalInformation
  .withdraw_mode
  .txt_box
  .l_box
  .c_box
  > div
  span:nth-child(1) {
  font-size: 0.36rem;
  font-weight: 300 !important;
  color: var(--theme-neutral1);
}
.withdrawalInformation
  .withdraw_mode
  .txt_box
  .l_box
  .c_box
  > div
  span:nth-child(2) {
  display: inline-block;
  width: 100%;
  font-size: 0.32rem;
  font-weight: 800;
  color: #86718c;
}
</style>
